<template>
  <div class="allinpay-config gray-box top-redius border-bottom-gray">
    <div class="title">
      {{ $t('allinpay.allinpayConfig') }}
    </div>
    <el-form
      ref="dataFormRef"
      label-width="180px"
      class="set-form"
      label-position="left"
      :model="dataForm"
      :rules="dataRule"
      @submit.prevent
    >
      <div class="allinpay-switch">
        <div style="color:#606266;font-size:14px;width:180px">
          <span style="color:#ff4949">*</span> {{ $t('allinpay.allinpay') }}
        </div>
        <el-switch
          v-model.trim="paySettlementType"
          style="margin-right:12px"
          :disabled="unSet || !appId"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="changeSwitchType"
        />
        <el-tooltip
          class="item"
          effect="dark"
          :content="$t('allinpay.allinpayOpenTip')"
          placement="top"
        >
          <el-icon><InfoFilled /></el-icon>
        </el-tooltip>
      </div>
      <el-form-item
        :label="$t('allinpay.requestAddress') + '：'"
        style="width:640px"
        prop="requestUrl"
      >
        <el-input
          v-model.trim="dataForm.requestUrl"
          :placeholder="$t('allinpay.pleaseEnterAddress')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="`appId：`"
        style="width:640px"
        prop="appId"
      >
        <el-input
          v-model.trim="dataForm.appId"
          :placeholder="$t('allinpay.pleaseEnterAppId')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="$t('allinpay.signatureKey') + '：'"
        style="width:640px"
        prop="appSecret"
      >
        <el-input
          v-model.trim="dataForm.appSecret"
          :placeholder="$t('allinpay.pleaseEnter')+$t('allinpay.signatureKey')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="$t('allinpay.merchantPrivateKey')+'：'"
        style="width:640px"
        prop="appPrivateKey"
      >
        <el-input
          v-model.trim="dataForm.appPrivateKey"
          :placeholder="$t('allinpay.pleaseEnter') + $t('allinpay.merchantPrivateKey')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="$t('allinpay.escrowAccountNumber')+'：'"
        style="width:640px"
        prop="accountSetNo"
      >
        <el-input
          v-model.trim="dataForm.accountSetNo"
          :placeholder="$t('allinpay.pleaseEnter') + $t('allinpay.escrowAccountNumber')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="$t('allinpay.appCertPath') + '：'"
        style="width:640px"
        prop="appCertPath"
      >
        <el-input
          v-model.trim="dataForm.appCertPath"
          :placeholder="$t('allinpay.pleaseEnter') + $t('allinpay.appCertPath')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="$t('allinpay.appPrivateCertPath') + '：'"
        style="width:640px"
        prop="appPrivateCertPath"
      >
        <el-input
          v-model.trim="dataForm.appPrivateCertPath"
          :placeholder="$t('allinpay.pleaseEnter') + $t('allinpay.appPrivateCertPath')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="$t('allinpay.vspCusId') + '：'"
        style="width:640px"
        prop="vspCusId"
      >
        <el-input
          v-model.trim="dataForm.vspCusId"
          :placeholder="$t('allinpay.pleaseEnter') + $t('allinpay.vspCusId')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="$t('allinpay.wechatSubAppId') + '：'"
        style="width:640px"
        prop="wechatSubAppId"
      >
        <el-input
          v-model.trim="dataForm.wechatSubAppId"
          :placeholder="$t('allinpay.pleaseEnter') + $t('allinpay.wechatSubAppId')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="$t('allinpay.alipaySubAppId')+'：'"
        style="width:640px"
        prop="alipaySubAppId"
      >
        <el-input
          v-model.trim="dataForm.alipaySubAppId"
          :placeholder="$t('allinpay.pleaseEnter') + $t('allinpay.alipaySubAppId')"
          controls-position="right"
        />
      </el-form-item>
      <el-button
        size="slmall"
        @click="dataFormSubmit('ALLINPAY_CONFIG')"
      >
        {{ $t('sysManagement.save') }}
      </el-button>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, h, toRefs } from 'vue'

const Data = reactive({
  dataForm: {
    requestUrl: '',
    appId: '',
    appSecret: '',
    appPrivateKey: '',
    accountSetNo: '',
    appCertPath: '',
    vspCusId: '',
    wechatSubAppId: '',
    alipaySubAppId: ''
  },
  appId: '', // 保存的appid，无数据时标识未保存
  dataRule: {
    requestUrl: [{ required: true, message: $t('allinpay.requestAddressNotEmpty'), trigger: 'blur' }],
    appId: [{ required: true, message: $t('allinpay.appIdNotEmpty'), trigger: 'blur' }],
    appSecret: [{ required: true, message: $t('allinpay.signatureKeyNotEmpty'), trigger: 'blur' }],
    appPrivateKey: [{ required: true, message: $t('allinpay.merchantPrivateKeyNotEmpty'), trigger: 'blur' }],
    accountSetNo: [{ required: true, message: $t('allinpay.escrowAccountNumberNotEmpty'), trigger: 'blur' }],
    appCertPath: [{ required: true, message: $t('allinpay.appCertPathNotEmpty'), trigger: 'blur' }],
    appPrivateCertPath: [{ required: true, message: $t('allinpay.appPrivateCertPathNotEmpty'), trigger: 'blur' }],
    vspCusId: [{ required: true, message: $t('allinpay.vspCusIdNotEmpty'), trigger: 'blur' }]
  },
  paySettlementType: false,
  unSet: false
})

const { dataForm, appId, dataRule, paySettlementType, unSet } = toRefs(Data)

const allinpayStore = useAllinpayStore()

onMounted(() => {
  init()
})

const init = () => {
  nextTick(() => {
    http({
      url: http.adornUrl('/sys/pconfig/info/' + 'PAY_SETTLEMENT_CONFIG'),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      if (data) {
        Data.paySettlementType = JSON.parse(data).paySettlementType === 1
        Data.unSet = Data.paySettlementType
      }
    })
    http({
      url: http.adornUrl('/sys/pconfig/info/' + 'ALLINPAY_CONFIG'),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      if (data) {
        Data.dataForm = JSON.parse(data)
        Data.appId = JSON.parse(data).appId // 获取appid，用于判断是否保存完成
      }
    })
  })
}

const dataFormRef = ref()
// 表单提交
const dataFormSubmit = (paramKey) => {
  if (paramKey === 'PAY_SETTLEMENT_CONFIG') {
    if (!Data.unSet && Data.appId) {
      dataFormRef.value.validate((valid) => {
        if (valid) {
          http({
            url: http.adornUrl('/sys/pconfig/save'),
            method: 'post',
            data: http.adornData({
              paramKey: 'PAY_SETTLEMENT_CONFIG',
              paramValue: JSON.stringify({ paySettlementType: Data.paySettlementType === true ? 1 : 0 }),
              remark: $t('allinpay.paymentSettlementAllocation')
            })
          }).then(() => {
            ElMessage.success($t('allinpay.saveSuccess'))
            // 开启通联后，更新vuex中的配置
            allinpayStore.getPaySettlementType()
          })
        }
      })
    }
  } else if (paramKey === 'ALLINPAY_CONFIG') {
    dataFormRef.value.validate((valid) => {
      if (valid) {
        http({
          url: http.adornUrl('/sys/pconfig/save'),
          method: 'post',
          data: http.adornData({
            paramKey: 'ALLINPAY_CONFIG',
            paramValue: JSON.stringify(Data.dataForm),
            remark: '通联支付配置'
          })
        }).then(() => {
          // 保存成功后，更新appid
          init()
          ElMessage({
            message: $t('allinpay.saveSuccess'),
            type: 'success',
            duration: 1500
          })
        })
      }
    })
  }
}

const changeSwitchType = (val) => {
  if (val) {
    ElMessageBox({
      message: h('div', { style: 'padding:30px 5px 0' }, [
        h('p', { style: 'line-height:24px;display:flex;align-item:center;' }, [
          h('i', { class: 'el-icon-warning', style: 'color:#FAAD14;font-size:24px' }, null),
          h('span', { style: 'font-weight:bold;margin-left:10px;color:#333333;font-size:18px' }, $t('allinpay.allinpayOpenTip2'))
        ]),
        h('p', { style: 'line-height:24px;color:#333333;font-size: 14px;margin:12px 0 20px 34px;' }, $t('allinpay.allinpayOpenTip3'))
      ]),
      showCancelButton: true,
      confirmButtonText: $t('allinpay.confirm'),
      cancelButtonText: $t('allinpay.cancel')
    }).then(() => {
      this.dataFormSubmit('PAY_SETTLEMENT_CONFIG')
    }).catch(() => {
      this.paySettlementType = false
    })
  }
}
</script>

<style lang="scss" scoped>
  .allinpay-switch {
    margin-bottom:18px;
    margin-top: 18px;
    display:flex;
    align-items: center;
  }
</style>
